<template>
  <a-modal
    v-model:visible="visible1"
    title-align="start"
    width="auto"
    :on-before-ok="handleCancel"
    @cancel="handleChange"
  >
    <template #title> 编辑 </template>
    <div class="elfrom">
      <a-form
        ref="formRef"
        :model="fromInfo"
        :layout="layout"
        :rules="rules"
        auto-label-width
      >
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              field="secretLevel"
              label="密级:"
              label-col-flex="400px"
            >
              <a-input v-model="fromInfo.secretLevel" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              field="changeNo"
              label="更改单编号:"
              label-col-flex="300px"
            >
              <a-input v-model="fromInfo.changeNo" disabled /></a-form-item
          ></a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              field="planListNo"
              label="采购计划编号:"
              label-col-flex="300px"
            >
              <a-input v-model="fromInfo.planListNo" disabled /></a-form-item
          ></a-col>
          <a-col :span="12">
            <a-form-item
              field="mdsItemCode"
              label="物料编码:"
              label-col-flex="300px"
            >
              <a-input v-model="fromInfo.mdsItemCode" disabled /></a-form-item
          ></a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              field="mdsItemName"
              label="物料名称:"
              label-col-flex="300px"
            >
              <a-input v-model="fromInfo.mdsItemName" disabled /></a-form-item
          ></a-col>
          <a-col :span="12">
            <a-form-item
              field="measureUnit"
              label="计量单位:"
              label-col-flex="300px"
            >
              <a-input v-model="fromInfo.measureUnit" disabled /></a-form-item
          ></a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              field="planQty"
              label="订单数量:"
              label-col-flex="300px"
            >
              <a-input v-model="fromInfo.planQty" disabled /></a-form-item
          ></a-col>
          <a-col :span="12">
            <a-form-item
              field="chngPlanQty"
              label="变更后订货数量:"
              label-col-flex="300px"
            >
              <a-input v-model="fromInfo.chngPlanQty" /></a-form-item
          ></a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              field="post"
              label="计划到货日期:"
              label-col-flex="300px"
            >
              <a-date-picker
                v-model="fromInfo.planArrivalDate"
                style="width: 100%"
                placeholder="请选择"
                disabled /></a-form-item
          ></a-col>
          <a-col :span="12">
            <a-form-item
              field="post"
              label="变更后计划到货日期:"
              label-col-flex="300px"
            >
              <a-date-picker
                v-model="fromInfo.chngPlanArrivalDate"
                format="YYYY-MM-DD"
                style="width: 100%"
                placeholder="请选择" /></a-form-item
          ></a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item field="post" label="编制人:" label-col-flex="300px">
              <a-input v-model="fromInfo.editUserName" disabled /></a-form-item
          ></a-col>
          <a-col :span="12">
            <a-form-item field="post" label="编制日期:" label-col-flex="300px">
              <a-date-picker
                v-model="fromInfo.editDate"
                style="width: 100%"
                placeholder="请选择"
                disabled /></a-form-item
          ></a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              field="chngCauseDesc"
              label="变更原因:"
              label-col-flex="400px"
            >
              <a-textarea
                v-model="fromInfo.chngCauseDesc"
                placeholder="最大输入1000字符"
                :max-length="1000"
                allow-clear
                show-word-limit
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, defineProps } from 'vue';
  import { updatePlanListChange } from '@/api/purchasePlan/planAuthorized';
  import { Message } from '@arco-design/web-vue';

  const props = defineProps({
    selection: {
      type: Array,
      default: () => {
        return {};
      },
    },
  });
  console.log(props.selection, 'props');
  const layout = ref('vertical');
  const fromInfo = ref({
    isRead: false,
    id: '',
    secretLevel: '', // 密级
    changeNo: '', // 更改单编号
    planListNo: '', // 采购计划编号
    mdsItemCode: '', // 物料编码
    mdsItemName: '', // 物料名称
    measureUnit: '', // 计量单位
    planQty: '', // 订货数量
    chngPlanQty: '', // 变更后订货数量
    planArrivalDate: '', // 计划到货日期
    chngPlanArrivalDate: '', // 变更后计划到货日期
    editUserName: '', // 编制人
    editDate: '', // 编制日期
    chngCauseDesc: '', // 变更原因
  });
  const formRef = ref();
  const rules = {
    chngCauseDesc: [
      {
        required: true,
        message: '变更原因必输项!',
      },
    ],
  };
  const init = (val) => {
    fromInfo.value = val;
    console.log(fromInfo.value, 'fromInfo.value');
  };

  const visible1 = ref(false);
  const open = () => {
    visible1.value = true;
  };

  const handleCancel = async () => {
    console.log('+++++++++');
    // if (!fromInfo.value.chngCauseDesc) {
    //   Modal.info({
    //     title: '提示',
    //     content: '请填写变更原因!',
    //   });
    //   return;
    // }
    const verifyStatus = await formRef.value?.validate();
    let result = false;
    if (!verifyStatus) {
      result = true;

      const params = {
        id: fromInfo.value.id,
        planQty: fromInfo.value.planQty,
        chngPlanQty: Number(fromInfo.value.chngPlanQty),
        chngPlanArrivalDate: fromInfo.value.chngPlanArrivalDate,
        planArrivalDate: fromInfo.value.planArrivalDate,
        chngCauseDesc: fromInfo.value.chngCauseDesc,
      };
      const res = (await updatePlanListChange({
        ...params,
      })) as any;
      console.log(res, 'res+++++++++++++');
      try {
        if (res.code === 200) {
          Message.success({
            content: '编辑成功!',
          });
        }
      } catch {
        return result;
      } finally {
        console.log();
      }
    }
    return result;

    // visible1.value = false;
  };
  const handleChange = () => {
    visible1.value = false;
    fromInfo.value.chngPlanQty = '';
    fromInfo.value.chngPlanArrivalDate = '';
    fromInfo.value.chngCauseDesc = '';
  };
  defineExpose({ open, init });
</script>

<style scoped lang="less">
  .elfrom {
    width: 1000px;
    // border: 1px solid #000;
  }
</style>
